<template>
  <el-dialog title="查看历史数据" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll append-to-body width="1200px">
      <el-row class="JNPF-common-search-box" :gutter="16">
      <el-form @submit.native.prevent>
        <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="设备编号" prop="azwz" >
                  <el-input v-model="sbbh" placeholder="设备编号" clearable :style='{"width":"100%"}' disabled prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备名称" prop="azwz" >
                  <el-input v-model="sbmc" placeholder="设备名称" clearable :style='{"width":"100%"}' disabled prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                    <el-form-item label="采集时间">
                        <el-date-picker v-model="query.cjsj" placeholder="采集时间" clearable format="yyyy-MM-dd HH:mm:ss" type="datetime"  />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                      <el-button type="primary" icon="el-icon-search" @click="init(row)">查询</el-button>
                      <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                  </el-form-item>
                </el-col>
            </el-form>
		    </el-row>
      </el-form>
      <div class="JNPF-common-search-box-right">
        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
          <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false" @click="refresh()" />
        </el-tooltip>
      </div>
    </el-row>
      <div id="chart" style="height:530px;margin-top:30px;"></div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{
        $t("common.cancelButton")
      }}</el-button>
      <!-- <el-button type="primary" @click="select()">{{
        $t("common.confirmButton")
      }}</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'extend-graphDemo-highchartsLine',
  data() {
    return {
      chart: null,
      option: {},

      query: {
          cjsj:undefined,
      },
      listQuery: {
        currentPage: 1,
        pageSize: 1000,
        sort: "desc",
        sidx: "",
      },
      visible: false,
      listLoading: false,
      yjid: undefined,
      row: undefined,

      sbbh:undefined,
      sbmc:undefined,

      xdatas:undefined,
      series:[],
      jldw:undefined
    }
  },
  mounted() {},

  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.chart.setOption(this.option)
    },
    init(row) {
      this.row = row;
      this.yjid = row.id;
      this.visible = true;
      this.listLoading = true;
      // this.chartOptions.yAxis.title.text = row.jldw;
      this.sbbh = row.sbbm;
      this.sbmc = row.sbmc;
      this.jldw = row.jldw;
      let query = {
        ...this.listQuery,
        ...this.query,
        yjid: this.yjid
      };
      request({
        url: `/api/system/anfxJczbyjrecord`,
            method: 'get',
            data: query
        }).then(res => {
            // this.list = res.data.list;
            let datas = res.data.list;
            let xdatas = [];
            let ydatas = [];
            if(datas.length > 0){
                for(let i=0;i<datas.length;i++){
                    xdatas.push(datas[i].cjsj);
                    ydatas.push(parseFloat(datas[i].cjz));
                }
            }
            // this.chartOptions.xAxis.categories = xdatas;
            // this.chartOptions.series.data = ydatas;
            
            let that = this;
            that.xdatas = xdatas;
            this.series = [{
                        name: '采集值',
                        type: 'line',
                        data: ydatas
                      }]
            // that.ydatas = ydatas;
            
            that.option = {
                title: {
                  text: '采集历史表',
                  left: 'center'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
                },
                toolbox: {
                  show: true,
                  // orient: 'vertical',
                  // left: 'right',
                  // top: 'top',
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    // magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                legend: {
                  data: ['采集值'],
                  left: 'center',
                  top: '30'
                },
                grid: {
                  left: '3%',
                  right: '6%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [
                  {
                    name: '采集时间',
                    type: 'category',
                    data: that.xdatas
                  }
                ],
                yAxis: [
                  {
                    name: '采集值('+that.jldw+')',
                    type: 'value'
                  }
                ],
                series: that.series
            }
            this.initChart()
            this.listLoading = false;
            // this.total = res.data.pagination.total;
            this.$nextTick(() => {
                this.tableHeight = "100%"
        });
      })  
    },
    reset() {
      for (let key in this.query) {
          this.query[key] = undefined
      }
      this.listQuery = {
          currentPage: 1,
          pageSize: 1000,
          sort: "desc",
          sidx: "",
      }
      this.init(this.row)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
}
</script>